<template>
	<view class="check-stand">
		<NavBar title="收银台" page="checkstand" @leftTap="goHome"/>
		<view class="checkstand" v-if="!isSuccess">
			<view class="pay-top">
				<view class="pay-name"> 需支付的金额 </view>
				<view class="pay-price"> ￥<text>{{totalAmount=='0.00'?'面议':totalAmount}}</text> </view>
			</view>
			<view class="pay-type">
				<view class="type-label"> 支付方式 </view>
				<view class="type-name" v-if="payType=='alipay'">
					<image src="/static/icon/order/al-pay.png" class="t-img"/>
					支付宝支付 
				</view>
				<view class="type-name" v-else>
					<image src="/static/icon/order/wx-pay.png" class="t-img"/>
					微信支付 
				</view>
			</view>
			<view class="pay-btn" @tap="pay"> 立即支付 </view>
		</view>
		<!-- 支付成功显示的界面 -->
		<view class="checkstand" v-else>
			<view class="pay-success">
				<image src="/static/icon/order/pay-success.png" class="p-img"/>
				<view> 支付成功 </view>
			</view>
			<view class="success-btn">
				<view class="btn" @tap="goHome"> 返回首页 </view>
				<view class="btn" @tap="viewOrder"> 查看订单 </view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import NavBar from '@/components/NavBar.vue';
	import { PaymentApi } from '@/service/index.js'
	const isSuccess = ref(false)
	const tradeSn = ref()
	const totalAmount = ref()
	const payType = ref()
	const successInfo = ref({})
	// 立即支付
	const pay = () => {
		let params = {
			target_type: 'orderall',
			target: tradeSn.value,
			pay: [
				{
					pay_type: payType.value,
					money: Number(totalAmount.value)
				}
			]
		}
		PaymentApi(params).then(res => {
      if(res.status) {
        uni.requestPayment({
            provider: 'alipay',
            orderInfo: res.payParams, //微信、支付宝订单数据 【注意微信的订单信息，键值应该全部是小写，不能采用驼峰命名】
            success: function (res) {
                console.log('success:' + JSON.stringify(res));
                isSuccess.value = true
                getApp().globalData.toast('支付成功')
            },
            fail: function (err) {
                console.log('fail:' + JSON.stringify(err));
                getApp().globalData.toast('支付失败')
            }
        });
      }
			console.log(res);
			successInfo.value = res.bills
		})
	}
	// 返回首页
	const goHome = () => {
		if(isSuccess.value == true) uni.switchTab({ url: '/pages/index/index' })
		else uni.navigateBack()
	}
	// 查看订单
	const viewOrder = () => {
		uni.navigateTo({ url: '/pages/orderManage/orderManage' })
	}
	onLoad((e) => {
		const { total_amount, trade_sn, pay_type } = e
		totalAmount.value = total_amount
		tradeSn.value = trade_sn
		payType.value = pay_type
	})
</script>

<style lang="scss" scoped>
	.checkstand {
		padding: 12px;
		box-sizing: border-box;
		.pay-top {
			margin-top: 45px;
			text-align: center;
			padding-bottom: 72px;
			.pay-name {
				font-weight: bold;
				font-size: 16px;
				color: #3D3D3D;
				line-height: 22px;
				margin-bottom: 22px;
			}
			.pay-price {
				font-weight: 700;
				font-size: 18px;
				color: #222222;
				text {
					font-size: 28px;
				}
			}
		}
		.pay-type {
			background-color: #fff;
			border-radius: 10px;
			height: 50px;
			padding: 0 12px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-weight: bold;
			font-size: 16px;
			color: #333333;
			margin-top: 10px;
			.type-name {
				font-size: 14px;
				line-height: 26px;
				display: flex;
				align-items: center;
				.t-img {
					width: 26px;
					height: 26px;
				}
			}
		}
		.pay-btn {
			margin-top: 20px;
			height: 50px;
			line-height: 50px;
			background: #FF3B1E;
			border-radius: 106px;
			text-align: center;
			font-weight: bold;
			font-size: 17px;
			color: #FFFFFF;
		}
		// 支付成功
		.pay-success {
			margin-top: 56px;
			text-align: center;
			.p-img {
				width: 120px;
				height: 120px;
				margin-bottom: 7px;
			}
			view {
				font-weight: bold;
				font-size: 16px;
				color: #3D3D3D;
				line-height: 22px;
			}
		}
		.success-btn {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 46px;
			margin-top: 34px;
			.btn {
				width: 120px;
				height: 40px;
				border-radius: 99px;
				border: 1px solid #FF3B1E;
				box-sizing: border-box;
				text-align: center;
				line-height: 40px;
				font-size: 16px;
				color: #FF3B1E;
				&:nth-last-of-type(1) {
					background: #FF3B1E;
					border: none;
					color: #FFFFFF;
				}
			}
		}
	}
</style>
